<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人日程管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
    <style>
        body {
            display: flex;
            flex-direction: column;
            background-color: #f4f4f9;
            min-height: 100vh;
            margin: 0;
        }

        h1.title {
            text-align: center;
            background-color: #3273dc;
            color: white;
            padding: 20px;
            margin: 0;
        }

        .content-wrapper {
            display: flex;
            flex: 1;
        }

        .sidebar {
            width: 200px;
            height: 100%;
            background-color: #eaecef;
            padding-top: 20px;
        }

        .sidebar a {
            display: block;
            padding: 10px 20px;
            color: #333;
            text-decoration: none;
            border-radius: 5px;
            margin: 5px;
        }

        .sidebar a.active {
            background-color: #3273dc;
            color: white;
        }

        .main-content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }

        .button {
            border-radius: 5px;
        }

        .button.is-primary {
            background-color: #3273dc;
        }

        .button.is-warning {
            background-color: #ffdd57;
        }

        .button.is-danger {
            background-color: #ff3860;
        }
    </style>
</head>

<body>
<h1 class="title">个人日程管理系统</h1>
<div class="content-wrapper">
    <div class="sidebar">
        <a href="#" class="active" onclick="openTab('meetings')">会议安排</a>
        <a href="#" onclick="openTab('tasks')">任务管理</a>
        <a href="#" onclick="openTab('appointments')">预约管理</a>
        <a href="#" onclick="openTab('reminders')">提醒设置</a>
        <a href="#" onclick="openTab('events')">活动安排</a>
    </div>
    <div class="main-content">
        <!-- 会议安排 -->
        <div id="meetings" class="tab-content">
            <h2>会议安排</h2>
            <input type="text" id="meetingSearch" placeholder="搜索会议名称" oninput="searchMeetings()">
            <button class="button is-primary" onclick="openAddMeetingModal()">添加会议</button>
            <table id="meetingTable" class="table is-striped">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>会议名称</th>
                    <th>会议时间</th>
                    <th>会议地点</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <!-- 任务管理 -->
        <div id="tasks" class="tab-content" style="display: none;">
            <h2>任务管理</h2>
            <input type="text" id="taskSearch" placeholder="搜索任务名称" oninput="searchTasks()">
            <button class="button is-primary" onclick="openAddTaskModal()">添加任务</button>
            <table id="taskTable" class="table is-striped">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>任务名称</th>
                    <th>截止日期</th>
                    <th>任务状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <!-- 预约管理 -->
        <div id="appointments" class="tab-content" style="display: none;">
            <h2>预约管理</h2>
            <input type="text" id="appointmentSearch" placeholder="搜索预约名称" oninput="searchAppointments()">
            <button class="button is-primary" onclick="openAddAppointmentModal()">添加预约</button>
            <table id="appointmentTable" class="table is-striped">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>预约名称</th>
                    <th>预约时间</th>
                    <th>预约对象</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <!-- 提醒设置 -->
        <div id="reminders" class="tab-content" style="display: none;">
            <h2>提醒设置</h2>
            <input type="text" id="reminderSearch" placeholder="搜索提醒名称" oninput="searchReminders()">
            <button class="button is-primary" onclick="openAddReminderModal()">添加提醒</button>
            <table id="reminderTable" class="table is-striped">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>提醒名称</th>
                    <th>提醒时间</th>
                    <th>提醒方式</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <!-- 活动安排 -->
        <div id="events" class="tab-content" style="display: none;">
            <h2>活动安排</h2>
            <input type="text" id="eventSearch" placeholder="搜索活动名称" oninput="searchEvents()">
            <button class="button is-primary" onclick="openAddEventModal()">添加活动</button>
            <table id="eventTable" class="table is-striped">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>活动名称</th>
                    <th>活动时间</th>
                    <th>活动地点</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<!-- 会议添加/编辑模态框 -->
<div class="modal" id="meetingModal">
    <div class="modal-background"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">添加/编辑会议</p>
            <button class="delete" aria-label="close" onclick="closeMeetingModal()"></button>
        </header>
        <section class="modal-card-body">
            <input type="hidden" id="meetingId">
            <label for="meetingName">会议名称</label>
            <input type="text" id="meetingName" class="input">
            <label for="meetingTime">会议时间</label>
            <input type="datetime-local" id="meetingTime" class="input">
            <label for="meetingLocation">会议地点</label>
            <input type="text" id="meetingLocation" class="input">
        </section>
        <footer class="modal-card-foot">
            <button class="button" onclick="closeMeetingModal()">关闭</button>
            <button class="button is-primary" onclick="saveMeeting()">保存</button>
        </footer>
    </div>
</div>

<!-- 任务添加/编辑模态框 -->
<div class="modal" id="taskModal">
    <div class="modal-background"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">添加/编辑任务</p>
            <button class="delete" aria-label="close" onclick="closeTaskModal()"></button>
        </header>
        <section class="modal-card-body">
            <input type="hidden" id="taskId">
            <label for="taskName">任务名称</label>
            <input type="text" id="taskName" class="input">
            <label for="taskDeadline">截止日期</label>
            <input type="datetime-local" id="taskDeadline" class="input">
            <label for="taskStatus">任务状态</label>
            <select id="taskStatus" class="input">
                <option value="未开始">未开始</option>
                <option value="进行中">进行中</option>
                <option value="已完成">已完成</option>
            </select>
        </section>
        <footer class="modal-card-foot">
            <button class="button" onclick="closeTaskModal()">关闭</button>
            <button class="button is-primary" onclick="saveTask()">保存</button>
        </footer>
    </div>
</div>

<!-- 预约添加/编辑模态框 -->
<div class="modal" id="appointmentModal">
    <div class="modal-background"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">添加/编辑预约</p>
            <button class="delete" aria-label="close" onclick="closeAppointmentModal()"></button>
        </header>
        <section class="modal-card-body">
            <input type="hidden" id="appointmentId">
            <label for="appointmentName">预约名称</label>
            <input type="text" id="appointmentName" class="input">
            <label for="appointmentTime">预约时间</label>
            <input type="datetime-local" id="appointmentTime" class="input">
            <label for="appointmentTarget">预约对象</label>
            <input type="text" id="appointmentTarget" class="input">
        </section>
        <footer class="modal-card-foot">
            <button class="button" onclick="closeAppointmentModal()">关闭</button>
            <button class="button is-primary" onclick="saveAppointment()">保存</button>
        </footer>
    </div>
</div>

<!-- 提醒添加/编辑模态框 -->
<div class="modal" id="reminderModal">
    <div class="modal-background"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">添加/编辑提醒</p>
            <button class="delete" aria-label="close" onclick="closeReminderModal()"></button>
        </header>
        <section class="modal-card-body">
            <input type="hidden" id="reminderId">
            <label for="reminderName">提醒名称</label>
            <input type="text" id="reminderName" class="input">
            <label for="reminderTime">提醒时间</label>
            <input type="datetime-local" id="reminderTime" class="input">
            <label for="reminderMethod">提醒方式</label>
            <select id="reminderMethod" class="input">
                <option value="声音">声音</option>
                <option value="震动">震动</option>
                <option value="弹窗">弹窗</option>
            </select>
        </section>
        <footer class="modal-card-foot">
            <button class="button" onclick="closeReminderModal()">关闭</button>
            <button class="button is-primary" onclick="saveReminder()">保存</button>
        </footer>
    </div>
</div>

<!-- 活动添加/编辑模态框 -->
<div class="modal" id="eventModal">
    <div class="modal-background"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">添加/编辑活动</p>
            <button class="delete" aria-label="close" onclick="closeEventModal()"></button>
        </header>
        <section class="modal-card-body">
            <input type="hidden" id="eventId">
            <label for="eventName">活动名称</label>
            <input type="text" id="eventName" class="input">
            <label for="eventTime">活动时间</label>
            <input type="datetime-local" id="eventTime" class="input">
            <label for="eventLocation">活动地点</label>
            <input type="text" id="eventLocation" class="input">
        </section>
        <footer class="modal-card-foot">
            <button class="button" onclick="closeEventModal()">关闭</button>
            <button class="button is-primary" onclick="saveEvent()">保存</button>
        </footer>
    </div>
</div>

<script>
    // 初始化表格
    function init() {
        initMeetings();
        initTasks();
        initAppointments();
        initReminders();
        initEvents();
    }

    // 打开 tab 页面
    function openTab(tabName) {
        let tabContents = document.querySelectorAll('.tab-content');
        tabContents.forEach(content => {
            content.style.display = 'none';
        });
        let sidebarLinks = document.querySelectorAll('.sidebar a');
        sidebarLinks.forEach(link => {
            link.classList.remove('active');
        });
        document.getElementById(tabName).style.display = 'block';
        document.querySelector(`.sidebar a[onclick="openTab('${tabName}')"]`).classList.add('active');
    }

    // 会议管理
    function initMeetings() {
        let meetings = JSON.parse(localStorage.getItem('meetings')) || [
            { id: 1, name: '会议1', time: '2024-01-01T09:00', location: '会议室1' },
            { id: 2, name: '会议2', time: '2024-01-02T10:00', location: '会议室2' },
            { id: 3, name: '会议3', time: '2024-01-03T11:00', location: '会议室3' },
            { id: 4, name: '会议4', time: '2024-01-04T14:00', location: '会议室4' },
            { id: 5, name: '会议5', time: '2024-01-05T15:00', location: '会议室5' },
            { id: 6, name: '会议6', time: '2024-01-06T16:00', location: '会议室6' },
            { id: 7, name: '会议7', time: '2024-01-07T17:00', location: '会议室7' },
            { id: 8, name: '会议8', time: '2024-01-08T18:00', location: '会议室8' },
            { id: 9, name: '会议9', time: '2024-01-09T19:00', location: '会议室9' },
            { id: 10, name: '会议10', time: '2024-01-10T20:00', location: '会议室10' }
        ];
        localStorage.setItem('meetings', JSON.stringify(meetings));
        renderMeetings(meetings);
    }

    function renderMeetings(meetings) {
        let meetingTable = document.getElementById('meetingTable').getElementsByTagName('tbody')[0];
        meetingTable.innerHTML = '';
        meetings.forEach(meeting => {
            let row = meetingTable.insertRow();
            row.insertCell(0).textContent = meeting.id;
            row.insertCell(1).textContent = meeting.name;
            row.insertCell(2).textContent = meeting.time;
            row.insertCell(3).textContent = meeting.location;
            let actionsCell = row.insertCell(4);
            actionsCell.innerHTML = `<button class="button is-warning" onclick="openEditMeetingModal(${meeting.id})">编辑</button>
                                         <button class="button is-danger" onclick="deleteMeeting(${meeting.id})">删除</button>`;
        });
    }

    function openAddMeetingModal() {
        document.getElementById('meetingId').value = '';
        document.getElementById('meetingName').value = '';
        document.getElementById('meetingTime').value = '';
        document.getElementById('meetingLocation').value = '';
        document.getElementById('meetingModal').classList.add('is-active');
    }

    function openEditMeetingModal(id) {
        let meetings = JSON.parse(localStorage.getItem('meetings'));
        let meeting = meetings.find(m => m.id === id);
        document.getElementById('meetingId').value = meeting.id;
        document.getElementById('meetingName').value = meeting.name;
        document.getElementById('meetingTime').value = meeting.time;
        document.getElementById('meetingLocation').value = meeting.location;
        document.getElementById('meetingModal').classList.add('is-active');
    }

    function saveMeeting() {
        let meetings = JSON.parse(localStorage.getItem('meetings'));
        let id = document.getElementById('meetingId').value;
        let name = document.getElementById('meetingName').value;
        let time = document.getElementById('meetingTime').value;
        let location = document.getElementById('meetingLocation').value;
        if (id) {
            let index = meetings.findIndex(m => m.id === parseInt(id));
            meetings[index] = { id: parseInt(id), name, time, location };
        } else {
            let newId = meetings.length > 0 ? Math.max(...meetings.map(m => m.id)) + 1 : 1;
            meetings.push({ id: newId, name, time, location });
        }
        localStorage.setItem('meetings', JSON.stringify(meetings));
        renderMeetings(meetings);
        closeMeetingModal();
    }

    function deleteMeeting(id) {
        let meetings = JSON.parse(localStorage.getItem('meetings'));
        meetings = meetings.filter(m => m.id!== id);
        localStorage.setItem('meetings', JSON.stringify(meetings));
        renderMeetings(meetings);
    }

    function searchMeetings() {
        let searchTerm = document.getElementById('meetingSearch').value.toLowerCase();
        let meetings = JSON.parse(localStorage.getItem('meetings'));
        let filteredMeetings = meetings.filter(meeting => meeting.name.toLowerCase().includes(searchTerm));
        renderMeetings(filteredMeetings);
    }

    function closeMeetingModal() {
        document.getElementById('meetingModal').classList.remove('is-active');
    }

    // 任务管理
    function initTasks() {
        let tasks = JSON.parse(localStorage.getItem('tasks')) || [
            { id: 1, name: '任务1', deadline: '2024-01-01T09:00', status: '未开始' },
            { id: 2, name: '任务2', deadline: '2024-01-02T10:00', status: '进行中' },
            { id: 3, name: '任务3', deadline: '2024-01-03T11:00', status: '已完成' },
            { id: 4, name: '任务4', deadline: '2024-01-04T14:00', status: '未开始' },
            { id: 5, name: '任务5', deadline: '2024-01-05T15:00', status: '进行中' },
            { id: 6, name: '任务6', deadline: '2024-01-06T16:00', status: '已完成' },
            { id: 7, name: '任务7', deadline: '2024-01-07T17:00', status: '未开始' },
            { id: 8, name: '任务8', deadline: '2024-01-08T18:00', status: '进行中' },
            { id: 9, name: '任务9', deadline: '2024-01-09T19:00', status: '已完成' },
            { id: 10, name: '任务10', deadline: '2024-01-10T20:00', status: '未开始' }
        ];
        localStorage.setItem('tasks', JSON.stringify(tasks));
        renderTasks(tasks);
    }

    function renderTasks(tasks) {
        let taskTable = document.getElementById('taskTable').getElementsByTagName('tbody')[0];
        taskTable.innerHTML = '';
        tasks.forEach(task => {
            let row = taskTable.insertRow();
            row.insertCell(0).textContent = task.id;
            row.insertCell(1).textContent = task.name;
            row.insertCell(2).textContent = task.deadline;
            row.insertCell(3).textContent = task.status;
            let actionsCell = row.insertCell(4);
            actionsCell.innerHTML = `<button class="button is-warning" onclick="openEditTaskModal(${task.id})">编辑</button>
                                         <button class="button is-danger" onclick="deleteTask(${task.id})">删除</button>`;
        });
    }

    function openAddTaskModal() {
        document.getElementById('taskId').value = '';
        document.getElementById('taskName').value = '';
        document.getElementById('taskDeadline').value = '';
        document.getElementById('taskStatus').value = '未开始';
        document.getElementById('taskModal').classList.add('is-active');
    }

    function openEditTaskModal(id) {
        let tasks = JSON.parse(localStorage.getItem('tasks'));
        let task = tasks.find(t => t.id === id);
        document.getElementById('taskId').value = task.id;
        document.getElementById('taskName').value = task.name;
        document.getElementById('taskDeadline').value = task.deadline;
        document.getElementById('taskStatus').value = task.status;
        document.getElementById('taskModal').classList.add('is-active');
    }

    function saveTask() {
        let tasks = JSON.parse(localStorage.getItem('tasks'));
        let id = document.getElementById('taskId').value;
        let name = document.getElementById('taskName').value;
        let deadline = document.getElementById('taskDeadline').value;
        let status = document.getElementById('taskStatus').value;
        if (id) {
            let index = tasks.findIndex(t => t.id === parseInt(id));
            tasks[index] = { id: parseInt(id), name, deadline, status };
        } else {
            let newId = tasks.length > 0 ? Math.max(...tasks.map(t => t.id)) + 1 : 1;
            tasks.push({ id: newId, name, deadline, status });
        }
        localStorage.setItem('tasks', JSON.stringify(tasks));
        renderTasks(tasks);
        closeTaskModal();
    }

    function deleteTask(id) {
        let tasks = JSON.parse(localStorage.getItem('tasks'));
        tasks = tasks.filter(t => t.id!== id);
        localStorage.setItem('tasks', JSON.stringify(tasks));
        renderTasks(tasks);
    }

    function searchTasks() {
        let searchTerm = document.getElementById('taskSearch').value.toLowerCase();
        let tasks = JSON.parse(localStorage.getItem('tasks'));
        let filteredTasks = tasks.filter(task => task.name.toLowerCase().includes(searchTerm));
        renderTasks(filteredTasks);
    }

    function closeTaskModal() {
        document.getElementById('taskModal').classList.remove('is-active');
    }

    // 预约管理
    function initAppointments() {
        let appointments = JSON.parse(localStorage.getItem('appointments')) || [
            { id: 1, name: '预约1', time: '2024-01-01T09:00', target: '客户1' },
            { id: 2, name: '预约2', time: '2024-01-02T10:00', target: '客户2' },
            { id: 3, name: '预约3', time: '2024-01-03T11:00', target: '客户3' },
            { id: 4, name: '预约4', time: '2024-01-04T14:00', target: '客户4' },
            { id: 5, name: '预约5', time: '2024-01-05T15:00', target: '客户5' },
            { id: 6, name: '预约6', time: '2024-01-06T16:00', target: '客户6' },
            { id: 7, name: '预约7', time: '2024-01-07T17:00', target: '客户7' },
            { id: 8, name: '预约8', time: '2024-01-08T18:00', target: '客户8' },
            { id: 9, name: '预约9', time: '2024-01-09T19:00', target: '客户9' },
            { id: 10, name: '预约10', time: '2024-01-10T20:00', target: '客户10' }
        ];
        localStorage.setItem('appointments', JSON.stringify(appointments));
        renderAppointments(appointments);
    }

    function renderAppointments(appointments) {
        let appointmentTable = document.getElementById('appointmentTable').getElementsByTagName('tbody')[0];
        appointmentTable.innerHTML = '';
        appointments.forEach(appointment => {
            let row = appointmentTable.insertRow();
            row.insertCell(0).textContent = appointment.id;
            row.insertCell(1).textContent = appointment.name;
            row.insertCell(2).textContent = appointment.time;
            row.insertCell(3).textContent = appointment.target;
            let actionsCell = row.insertCell(4);
            actionsCell.innerHTML = `<button class="button is-warning" onclick="openEditAppointmentModal(${appointment.id})">编辑</button>
                                         <button class="button is-danger" onclick="deleteAppointment(${appointment.id})">删除</button>`;
        });
    }

    function openAddAppointmentModal() {
        document.getElementById('appointmentId').value = '';
        document.getElementById('appointmentName').value = '';
        document.getElementById('appointmentTime').value = '';
        document.getElementById('appointmentTarget').value = '';
        document.getElementById('appointmentModal').classList.add('is-active');
    }

    function openEditAppointmentModal(id) {
        let appointments = JSON.parse(localStorage.getItem('appointments'));
        let appointment = appointments.find(a => a.id === id);
        document.getElementById('appointmentId').value = appointment.id;
        document.getElementById('appointmentName').value = appointment.name;
        document.getElementById('appointmentTime').value = appointment.time;
        document.getElementById('appointmentTarget').value = appointment.target;
        document.getElementById('appointmentModal').classList.add('is-active');
    }

    function saveAppointment() {
        let appointments = JSON.parse(localStorage.getItem('appointments'));
        let id = document.getElementById('appointmentId').value;
        let name = document.getElementById('appointmentName').value;
        let time = document.getElementById('appointmentTime').value;
        let target = document.getElementById('appointmentTarget').value;
        if (id) {
            let index = appointments.findIndex(a => a.id === parseInt(id));
            appointments[index] = { id: parseInt(id), name, time, target };
        } else {
            let newId = appointments.length > 0 ? Math.max(...appointments.map(a => a.id)) + 1 : 1;
            appointments.push({ id: newId, name, time, target });
        }
        localStorage.setItem('appointments', JSON.stringify(appointments));
        renderAppointments(appointments);
        closeAppointmentModal();
    }

    function deleteAppointment(id) {
        let appointments = JSON.parse(localStorage.getItem('appointments'));
        appointments = appointments.filter(a => a.id!== id);
        localStorage.setItem('appointments', JSON.stringify(appointments));
        renderAppointments(appointments);
    }

    function searchAppointments() {
        let searchTerm = document.getElementById('appointmentSearch').value.toLowerCase();
        let appointments = JSON.parse(localStorage.getItem('appointments'));
        let filteredAppointments = appointments.filter(appointment => appointment.name.toLowerCase().includes(searchTerm));
        renderAppointments(filteredAppointments);
    }

    function closeAppointmentModal() {
        document.getElementById('appointmentModal').classList.remove('is-active');
    }

    // 提醒管理
    function initReminders() {
        let reminders = JSON.parse(localStorage.getItem('reminders')) || [
            { id: 1, name: '提醒1', time: '2024-01-01T09:00', method: '声音' },
            { id: 2, name: '提醒2', time: '2024-01-02T10:00', method: '震动' },
            { id: 3, name: '提醒3', time: '2024-01-03T11:00', method: '弹窗' },
            { id: 4, name: '提醒4', time: '2024-01-04T14:00', method: '声音' },
            { id: 5, name: '提醒5', time: '2024-01-05T15:00', method: '震动' },
            { id: 6, name: '提醒6', time: '2024-01-06T16:00', method: '弹窗' },
            { id: 7, name: '提醒7', time: '2024-01-07T17:00', method: '声音' },
            { id: 8, name: '提醒8', time: '2024-01-08T18:00', method: '震动' },
            { id: 9, name: '提醒9', time: '2024-01-09T19:00', method: '弹窗' },
            { id: 10, name: '提醒10', time: '2024-01-10T20:00', method: '声音' }
        ];
        localStorage.setItem('reminders', JSON.stringify(reminders));
        renderReminders(reminders);
    }

    function renderReminders(reminders) {
        let reminderTable = document.getElementById('reminderTable').getElementsByTagName('tbody')[0];
        reminderTable.innerHTML = '';
        reminders.forEach(reminder => {
            let row = reminderTable.insertRow();
            row.insertCell(0).textContent = reminder.id;
            row.insertCell(1).textContent = reminder.name;
            row.insertCell(2).textContent = reminder.time;
            row.insertCell(3).textContent = reminder.method;
            let actionsCell = row.insertCell(4);
            actionsCell.innerHTML = `<button class="button is-warning" onclick="openEditReminderModal(${reminder.id})">编辑</button>
                                         <button class="button is-danger" onclick="deleteReminder(${reminder.id})">删除</button>`;
        });
    }

    function openAddReminderModal() {
        document.getElementById('reminderId').value = '';
        document.getElementById('reminderName').value = '';
        document.getElementById('reminderTime').value = '';
        document.getElementById('reminderMethod').value = '声音';
        document.getElementById('reminderModal').classList.add('is-active');
    }

    function openEditReminderModal(id) {
        let reminders = JSON.parse(localStorage.getItem('reminders'));
        let reminder = reminders.find(r => r.id === id);
        document.getElementById('reminderId').value = reminder.id;
        document.getElementById('reminderName').value = reminder.name;
        document.getElementById('reminderTime').value = reminder.time;
        document.getElementById('reminderMethod').value = reminder.method;
        document.getElementById('reminderModal').classList.add('is-active');
    }

    function saveReminder() {
        let reminders = JSON.parse(localStorage.getItem('reminders'));
        let id = document.getElementById('reminderId').value;
        let name = document.getElementById('reminderName').value;
        let time = document.getElementById('reminderTime').value;
        let method = document.getElementById('reminderMethod').value;
        if (id) {
            let index = reminders.findIndex(r => r.id === parseInt(id));
            reminders[index] = { id: parseInt(id), name, time, method };
        } else {
            let newId = reminders.length > 0 ? Math.max(...reminders.map(r => r.id)) + 1 : 1;
            reminders.push({ id: newId, name, time, method });
        }
        localStorage.setItem('reminders', JSON.stringify(reminders));
        renderReminders(reminders);
        closeReminderModal();
    }

    function deleteReminder(id) {
        let reminders = JSON.parse(localStorage.getItem('reminders'));
        reminders = reminders.filter(r => r.id!== id);
        localStorage.setItem('reminders', JSON.stringify(reminders));
        renderReminders(reminders);
    }

    function searchReminders() {
        let searchTerm = document.getElementById('reminderSearch').value.toLowerCase();
        let reminders = JSON.parse(localStorage.getItem('reminders'));
        let filteredReminders = reminders.filter(reminder => reminder.name.toLowerCase().includes(searchTerm));
        renderReminders(filteredReminders);
    }

    function closeReminderModal() {
        document.getElementById('reminderModal').classList.remove('is-active');
    }

    // 活动管理
    function initEvents() {
        let events = JSON.parse(localStorage.getItem('events')) || [
            { id: 1, name: '活动1', time: '2024-01-01T09:00', location: '活动地点1' },
            { id: 2, name: '活动2', time: '2024-01-02T10:00', location: '活动地点2' },
            { id: 3, name: '活动3', time: '2024-01-03T11:00', location: '活动地点3' },
            { id: 4, name: '活动4', time: '2024-01-04T14:00', location: '活动地点4' },
            { id: 5, name: '活动5', time: '2024-01-05T15:00', location: '活动地点5' },
            { id: 6, name: '活动6', time: '2024-01-06T16:00', location: '活动地点6' },
            { id: 7, name: '活动7', time: '2024-01-07T17:00', location: '活动地点7' },
            { id: 8, name: '活动8', time: '2024-01-08T18:00', location: '活动地点8' },
            { id: 9, name: '活动9', time: '2024-01-09T19:00', location: '活动地点9' },
            { id: 10, name: '活动10', time: '2024-01-10T20:00', location: '活动地点10' }
        ];
        localStorage.setItem('events', JSON.stringify(events));
        renderEvents(events);
    }

    function renderEvents(events) {
        let eventTable = document.getElementById('eventTable').getElementsByTagName('tbody')[0];
        eventTable.innerHTML = '';
        events.forEach(event => {
            let row = eventTable.insertRow();
            row.insertCell(0).textContent = event.id;
            row.insertCell(1).textContent = event.name;
            row.insertCell(2).textContent = event.time;
            row.insertCell(3).textContent = event.location;
            let actionsCell = row.insertCell(4);
            actionsCell.innerHTML = `<button class="button is-warning" onclick="openEditEventModal(${event.id})">编辑</button>
                                         <button class="button is-danger" onclick="deleteEvent(${event.id})">删除</button>`;
        });
    }

    function openAddEventModal() {
        document.getElementById('eventId').value = '';
        document.getElementById('eventName').value = '';
        document.getElementById('eventTime').value = '';
        document.getElementById('eventLocation').value = '';
        document.getElementById('eventModal').classList.add('is-active');
    }

    function openEditEventModal(id) {
        let events = JSON.parse(localStorage.getItem('events'));
        let event = events.find(e => e.id === id);
        document.getElementById('eventId').value = event.id;
        document.getElementById('eventName').value = event.name;
        document.getElementById('eventTime').value = event.time;
        document.getElementById('eventLocation').value = event.location;
        document.getElementById('eventModal').classList.add('is-active');
    }

    function saveEvent() {
        let events = JSON.parse(localStorage.getItem('events'));
        let id = document.getElementById('eventId').value;
        let name = document.getElementById('eventName').value;
        let time = document.getElementById('eventTime').value;
        let location = document.getElementById('eventLocation').value;
        if (id) {
            let index = events.findIndex(e => e.id === parseInt(id));
            events[index] = { id: parseInt(id), name, time, location };
        } else {
            let newId = events.length > 0 ? Math.max(...events.map(e => e.id)) + 1 : 1;
            events.push({ id: newId, name, time, location });
        }
        localStorage.setItem('events', JSON.stringify(events));
        renderEvents(events);
        closeEventModal();
    }

    function deleteEvent(id) {
        let events = JSON.parse(localStorage.getItem('events'));
        events = events.filter(e => e.id!== id);
        localStorage.setItem('events', JSON.stringify(events));
        renderEvents(events);
    }

    function searchEvents() {
        let searchTerm = document.getElementById('eventSearch').value.toLowerCase();
        let events = JSON.parse(localStorage.getItem('events'));
        let filteredEvents = events.filter(event => event.name.toLowerCase().includes(searchTerm));
        renderEvents(filteredEvents);
    }

    function closeEventModal() {
        document.getElementById('eventModal').classList.remove('is-active');
    }

    // 页面加载完成后初始化
    window.onload = function () {
        init();
    };
</script>
</html>